Teleport 自訂義元件位置

teleport 是傳送的意思。假設我們今天希望在 navbar 和 footer 區塊都用到同一個元件，我們就可以透過 teleport 來實現。

結構 : <teleport to="{ class 名稱或 Id }">

我們可以把這個結構放到頁面的指定位置上。

<div id="target"></div>

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文',
      toggle: false
    }
  },
  template: `
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">{{ title }}</h5>
        <p class="card-text">{{ content }}</p>
        <button type="button" @click="toggle = !toggle">切換元素顯示</button>
      </div>
    </div>
      // teleport 用法
    <teleport to="#target">
      <div v-if="toggle" class="alert alert-danger">被招喚的元素</div>
    </teleport>
    `,
    props: ['item']
  });

使用限制（錯誤情境）

假設當我們所執行的JS程式碼在main區塊運行時，如果要使用 teleport 把元件位置設置在側欄的話，就會出錯。
這是因為當我們在運行這段 JS 時，它只在我們左側的 main 區塊執行，並沒有在右側區塊執行的緣故。

實用技巧（取代標題、使用多個teleport）

我們甚至可以利用 teleport來改變文件的標題。

<new-title></new-title>

  app.component('new-title', {
    template: `<teleport to="title"> - 新增的標題片段</teleport>
    <teleport to="h1"> - 新增的文字片段</teleport>`
  })

JS

<script>
const app = Vue.createApp({
})

  app.component('card', {
    data() {
      return {
        title: '文件標題',
        content: '文件內文',
        toggle: false
      }
    },
    template: `
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          <p class="card-text">{{ content }}</p>
          <button type="button" @click="toggle = !toggle">切換元素顯示</button>
        </div>
      </div>
      <teleport to="#target">
      <div v-if="toggle" class="alert alert-danger">被招喚的元素</div>
      </teleport>
    `,
    props: ['item']
  });

  app.component('card2', {
    template: `
      <div class="alert alert-danger">被招喚的元素</div>
    `
  })

  app.component('new-title', {
    template: `<teleport to="title"> - 新增的標題片段</teleport>
    <teleport to="h1"> - 新增的文字片段</teleport>`
  })

  app.mount('#app');
</script>